import React, { useState, useEffect } from 'react'
import { Button, SearchBar, Space,Swiper, Toast,Ellipsis,Badge,TabBar  } from 'antd-mobile'
import { AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
    AppstoreOutline,
 } from 'antd-mobile-icons'
import { Outlet, useNavigate } from 'react-router-dom'
import { Refresh,Cart,Home } from '@nutui/icons-react'
import { BackTop, Cell } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import '../css/Main.css'
import ButtomBar from '../../sjc/components/ButtomBar'
import axios from 'axios'


export default function Bottombutton() {
    let navigate = useNavigate()
    const tabs = [
        {
          key: '/bttm/main',
          title: '首页',
          icon: <Home />,
        },
        {
          key: '/bttm/typeList',
          title: '分类',
          icon: <AppstoreOutline />,
        },
        {
            key: '/bttm/info',
            title: '消息',
            icon: <MessageOutline />,
          },
          {
            key: '/bttm/gouwu',
            key: '/bttm/car',
            title: '购物车',
            icon: <Cart />
          },
        {
          key: '/bttm/my',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
      const [activeKey, setActiveKey] = useState('')
  return (
    <div>
        <Outlet></Outlet>
        <TabBar onChange={(value)=>{
            navigate(value)
            }} style={{background:'white',width:'100%',height:'50px',borderTop:'1px solid #ccc',position:'fixed',bottom:'0px',
            zIndex:'9999'}}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title}/>
          ))}
        </TabBar>
    </div>
  )
}
